<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读书笔记 - AI 智享生活管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <!-- 状态栏 -->
    <div class="status-bar">
        <img src="../images/status-bar.png" alt="状态栏" class="w-full h-full object-cover">
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部导航 -->
        <nav class="px-4 py-2 flex items-center border-b">
            <a href="features.html" class="text-gray-600">
                <i class="fas fa-chevron-left text-xl"></i>
            </a>
            <h1 class="flex-1 text-center font-semibold">读书笔记</h1>
        </nav>

        <!-- 功能介绍 -->
        <div class="px-4 py-6">
            <div class="bg-gradient-to-br from-orange-500 to-red-500 rounded-xl p-6 text-white">
                <h2 class="text-2xl font-semibold">AI智能读书笔记</h2>
                <p class="mt-2 opacity-90">让阅读更有效率，笔记更有价值</p>
            </div>

            <!-- 功能特点 -->
            <div class="mt-8 space-y-6">
                <div class="flex items-start">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-robot text-blue-500"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="font-medium">AI智能助手</h3>
                        <p class="text-gray-500 text-sm mt-1">自动生成阅读要点，提供深度解析和知识关联</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-chart-line text-green-500"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="font-medium">阅读追踪</h3>
                        <p class="text-gray-500 text-sm mt-1">记录阅读进度，生成阅读报告，培养阅读习惯</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-brain text-purple-500"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="font-medium">知识管理</h3>
                        <p class="text-gray-500 text-sm mt-1">智能分类整理，构建个人知识体系</p>
                    </div>
                </div>
            </div>

            <!-- 会员权益 -->
            <div class="mt-8 bg-yellow-50 rounded-xl p-4">
                <div class="flex items-center">
                    <i class="fas fa-crown text-yellow-500 text-xl"></i>
                    <span class="ml-2 font-medium">会员专享权益</span>
                </div>
                <ul class="mt-3 space-y-2 text-sm text-gray-600">
                    <li class="flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        无限量笔记存储
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        AI智能助手全功能支持
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        高级数据分析与可视化
                    </li>
                </ul>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t">
            <a href="vip.html" class="block w-full bg-blue-500 text-white py-3 rounded-full text-center font-medium">
                开通会员体验完整功能
            </a>
        </div>
    </div>
</body>
</html> 
